<template>
    <a-layout-sider :class="['layout-sider', collapsed ? '' : 'hide-sider']" v-model:collapsed="collapsed" collapsible>
        <div class="sider-line flex">
            <Select class="grouping-select" style="width: 120px" placeholder="选分组" @change="handleChange">
                <a-select-option value="jack">Jack</a-select-option>
                <a-select-option value="lucy">Lucy</a-select-option>
            </Select>
            <Search v-if="!collapsed" placeholder="搜企微" :width="140" />
        </div>
        <a-menu class="menu-wrapper" mode="inline">
            <a-menu-item v-for="item in data" :key="item?.id" class="menu-item" v-model:selectedKeys="selectedKeys">
                <a-space :size="24">
                    <Badge :count="item.id">
                        <Avatar shape="square" :size="48" :src="item?.avatar" />
                    </Badge>
                </a-space>
                <div class="info">
                    <div>{{ item?.name }}</div>
                    <div class="intro">{{ item?.updated_at }}</div>
                </div>
            </a-menu-item>
        </a-menu>
    </a-layout-sider>
</template>

<script setup lang="ts">
import {ref, PropType} from "vue";
import {Select, Badge, Avatar} from "ant-design-vue";
import {Search} from "@/components";

const selectedKeys = ref([]);
const collapsed = ref<boolean>(false);
const grouping = ref<string>(""); // 折叠分组

const {data} = defineProps({
    data: {
        type: Array as PropType<any[]>,
        default: () => [],
    },
});

// 分组切换
const handleChange = e => (grouping.value = e);
</script>

<style scoped lang="less">
.hide-sider {
    box-sizing: border-box;
    flex: 0 0 260px !important;
    width: 260px !important;
    min-width: fit-content !important;
    max-width: 260px !important;
    :deep(.ant-layout-sider-trigger) {
        width: 260px !important;
    }
}

.layout-sider {
    background-color: #fff;
    border-right: 1px solid #f0f0f0;
    display: flex;
    flex-direction: column;

    .sider-line {
        width: 100%;
        padding: 6px 0px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-around;
        border-bottom: 1px solid #f0f0f0;

        .grouping-select {
            width: 90px !important;
        }
        .trigger {
            width: 24px;
            height: 24px;
            font-size: 24px;
        }
    }

    :deep(.ant-layout-sider-children) {
        display: flex;
        flex-direction: column;
    }
    .menu-wrapper {
        overflow-y: scroll;
        flex: 1;
        border-bottom: 1px solid #ccc;

        :deep(.ant-menu-item) {
            height: max-content !important;
            width: 100%;
            box-sizing: border-box;
            display: flex;
            width: 100%;
            padding: 12px !important;
            border-radius: 4px;
            cursor: pointer;
            margin: 0 !important;

            .ant-menu-title-content {
                display: flex;
                align-items: center;
                overflow: visible;
            }
        }
        :deep(.ant-menu-item-selected) {
            background-color: #b0b0b0 !important ;
        }

        .menu-item {
            display: flex;
            .header {
                .img {
                    width: 40px;
                    height: 40px;
                }
            }
            .info {
                display: flex;
                flex-direction: column;
                margin-left: 18px;
                div {
                    color: #000;
                    display: inline-block;
                    font-size: 14px;
                    line-height: 20px;
                    width: 100%;
                }
                .intro {
                    margin-top: 6px;
                    color: rgb(136, 137, 153);
                    line-height: 14px;
                }
            }
        }
    }
}
</style>
